#header {
  padding-top: 20px;
  height: 84px;
  line-height: 64px;
  background-color: #ffffff;

  .container {
    position: relative;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    max-width: 1200px;

    .menu-icon {
      display: none;
      position: absolute;
      top: 25px;
      right: 30px;
      cursor: pointer;
      z-index: 1;
    }

    .logo {
      height: 64px;
      line-height: 64px;

      img {
        height: 32px;

        & + svg {
          position: relative;
          top: 20px;
        }
      }
    }

    .search {
      float: left;
      margin: 22px auto 0;
      padding-left: 16px;
      height: 24px;
      line-height: 24px;
      border-left: 1px solid #ebedf0;

      .search-icon {
        position: relative;
        color: #ced4d9;
        top: -3px;
      }

      .search-input {
        top: -4px;
        direction: ltr;

        input {
          position: relative;
          border: 0;
          box-shadow: none;
          background: inherit;
        }
      }
    }

    .navigation {
      float: right;
      margin: 11px auto 0;
      height: 11px;
      line-height: 11px;

      .menu {
        display: inline-block;
        border-bottom: none;
        background: inherit;

        .category-icon {
          margin-left: 10px;
        }
      }
    }
  }
}

#menu-mobile {
  .search {
    padding: 10px 24px;
  }

  .menu {
    min-width: 260px;
    border-right: none;
  }
}

.search-dropdown {
  .select-group {
    border-bottom: 1px solid #f6f6f6;

    .group-title {
      font-size: 14px;
    }

    .select-option {
      background-color: inherit;

      a {
        display: block;
        color: inherit;
        font-weight: normal;
      }

      &:hover {
        background-color: @primary-color-1;

        a {
          color: @primary-color-5;
        }
      }
    }

    .select-option-tag {
      display: inline-block;
      margin-left: 20px;
      padding: 0;
      background-color: inherit;

      div {
        margin-right: 20px;

        &:hover {
          color: @primary-color;
          border-color: @primary-color-4;
          background-color: @primary-color-1;
        }
      }
    }
  }

  .search-empty {
    background-color: inherit;
  }

  .search-more {
    background-color: inherit;
    text-align: center;

    .text {
      display: block;
      font-size: 13px;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.45);
      transition: 0.25s;

      &:hover {
        color: @primary-color-5;
      }
    }
  }
}

body.dark {
  #header {
    background-color: @dark-bg-color;

    .container {
      .search {
        border-left-color: @dark-text-color-10;

        .search-icon {
          color: @dark-text-color-9;
        }

        .search-input {
          .ant-select-selection {
            background-color: @dark-bg-color;

            &__placeholder {
              color: @dark-text-color-9;
            }

            &__clear {
              color: @dark-text-color-9;
              background-color: inherit;
            }
          }

          .ant-select-search {
            &__field {
              color: @dark-text-color;
            }
          }
        }
      }

      .navigation {
        .menu {
          color: @dark-text-color;

          .ant-menu-item-selected {
            a {
              color: @primary-color;
            }
          }

          a {
            color: @dark-text-color;

            &:hover {
              color: @primary-color;
            }
          }
        }
      }
    }
  }

  #menu-mobile {
    color: @dark-text-color;
    background-color: @dark-text-color-10;

    .menu {
      color: @dark-text-color;
      background-color: @dark-text-color-10;
    }
  }

  .search-dropdown {
    .select-group {
      border-bottom-color: @dark-text-color-9;

      .group-title {
        color: @dark-text-color-8;
      }

      .select-option {
        color: @dark-text-color;

        &:hover {
          background-color: @dark-text-color-10;
        }
      }

      .select-option-tag {
        .ant-tag {
          color: @dark-text-color;
          background-color: @dark-text-color-10;
          border-color: @dark-text-color-9;
        }
      }
    }

    .search-more {
      .text {
        color: @dark-text-color;

        &:hover {
          color: @primary-color-5;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px) {
  #header {
    .container {
      text-align: center;

      .menu-icon {
        display: block;
      }
    }
  }
}
